<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - More/More</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Validators">Validators</a></h4>
      <div class="menu-item"><a href="#Validators:validate-no-space">validate.no.space</a></div>
      <div class="menu-item"><a href="#Validators:validate-enforce-oncheck">validate.enforce.oncheck</a></div>
      <div class="menu-item"><a href="#Validators:validate-ignore-oncheck">validate.ignore.oncheck</a></div>
      <div class="menu-item"><a href="#Validators:validate-toggle-oncheck">validate.toggle.oncheck</a></div>
      <div class="menu-item"><a href="#Validators:validate-required-check">validate.required.check</a></div>
      <div class="menu-item"><a href="#Validators:validate-reqchk-bynode">validate.reqchk.bynode</a></div>
      <div class="menu-item"><a href="#Validators:validate-reqchk-byname">validate.reqchk.byname</a></div>
      <div class="menu-item"><a href="#Validator:validate-after-date">validate.after.date</a></div>
      <div class="menu-item"><a href="#Validator:validate-before-date">validate.before.date</a></div>
      <div class="menu-item"><a href="#Validators:validate-custom-required">validate.custom.required</a></div>
      <div class="menu-item"><a href="#Validators:validate-same-month">validate.same.month</a></div>
      <div class="menu-item"><a href="#Validators:validate-match">validate.match</a></div>
      <div class="menu-item"><a href="#Validators:validate-cc-num">validate.cc.num</a></div>
      <h4 class="menu-item"><a href="#Localization">Localization</a></h4>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Validators"><a href="#Validators">Additional InputValidators:</a></h1>
      <h3 class="description">Tutorial/Demo</h3>
      <p>Here are the validators that are included in this libary. Add the className to any input and then create a new <a href="../../../docs/more/Forms/Form.Validator.html#Form-Validator">Form.Validator</a> and these will automatically be applied.</p>
      <h2 id="Validators:validate-no-space"><a href="#Validators:validate-no-space">Validator: validate-no-space</a></h2>
      <p class="description">Enforces that there are no spaces in the input value.</p>
      <h2 id="Validators:validate-enforce-oncheck"><a href="#Validators:validate-enforce-oncheck">Validator: validate-enforce-oncheck</a></h2>
      <p class="description">When added to a checkbox/radio button, and a list (<em>array</em>) of element id's can be passed in (<em>toEnforce</em>) to enforce validation on those fields.</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-enforce-oncheck toEnforce:['name','email','phone']"</span>/&gt;
<span class="co1">//when checked, the inputs with the ids 'name', 'email', and 'phone' will also be validated on change/submit</span>
&nbsp;
&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-enforce-oncheck enforceChildrenOf:'someParent'"</span>/&gt;

<span class="co1">//when checked, all inputs inside $('someParent') will be validated on change/submit</span>
</pre>
      <h2 id="Validators:validate-ignore-oncheck"><a href="#Validators:validate-ignore-oncheck">Validator: validate-ignore-oncheck</a></h2>
      <p class="description">When added to a checkbox/radio button, and a list (<em>array</em>) of element id's can be passed in (<em>toIgnore</em>) in the <em>validatorProps</em> to ignore validation on those fields.</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-ignore-oncheck toIgnore:['name','email','phone']"</span>/&gt;
<span class="co1">//when checked, the inputs with the ids 'name', 'email', and 'phone' will NOT be validated on change/submit</span>
&nbsp;
&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-ignore-oncheck ignoreChildrenOf:'someParent'"</span>/&gt;

<span class="co1">//when checked, all inputs inside $('someParent') will NOT be validated on change/submit</span>
</pre>
      <h2 id="Validators:validate-toggle-oncheck"><a href="#Validators:validate-toggle-oncheck">Validator: validate-toggle-oncheck</a></h2>
      <p class="description">When the input is checked or un-checked, the inputs defined will be toggled from ignore (if the input is un-checked) to enforce (if it is checked).</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-toggle-oncheck toToggle:['name','email','phone']"</span>/&gt;

<span class="co1">//when checked, the inputs with the ids 'name', 'email', and 'phone' will be validated on change/submit</span>
<span class="co1">//when unchecked, they will be ignored</span>
&nbsp;
&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-toggle-oncheck toToggleChildrenOf:'someParent'"</span>/&gt;
<span class="co1">//when checked, all inputs inside $('someParent') will be validated on change/submit</span>
<span class="co1">//when unchecked, they will be ignored</span>

</pre>
      <h2 id="Validators:validate-required-check"><a href="#Validators:validate-required-check">Validator: validate-required-check</a></h2>
      <p class="description">Forces the user to check a checkbox (thing agreeing to terms and conditions).</p>
      <h2 id="Validators:validate-reqchk-bynode"><a href="#Validators:validate-reqchk-bynode">Validator: validate-reqchk-bynode</a></h2>
      <p class="description">At least one checkbox/radio is required to be checked in this node. <em>nodeId</em> needs to be passed to the <em>validatorProps</em>.</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-reqchk-bynode nodeId:'someParent'"</span>/&gt;
&nbsp;
<span class="co1">//you can also specify a selector for the parent</span>
&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-reqchk-bynode nodeId:'someParent' selector:'input.foo[type=checkbox]'"</span>/&gt;

</pre>
      <h2 id="Validators:validate-reqchk-byname"><a href="#Validators:validate-reqchk-byname">Validator: validate-reqchk-byname</a></h2>
      <p class="description">At least one checkbox/radio is required to be checked in this name group. You can specify an optional label that completes the error message: "Please select a <em>label</em>." - it defaults to either "checkbox" or "radio" - the type of the input. By default it uses the name of the input to find all inputs with the same name but you can specify the optional <em>validatorProps</em> name <em>groupName</em> if you prefer.</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"checkbox"</span> <span class="kw2">class</span>=<span class="st0">"validate-reqchk-byname label: 'flavor'"</span> <span class="kw3">name</span>=<span class="st0">"favoriteFlavor"</span>/&gt;
</pre>
      <h2 id="Validator:validate-after-date"><a href="#Validator:validate-after-date">Validator: validate-after-date</a></h2>
      <p class="description">Takes in the id of a start field id and compares it to make sure the given value is later than or equal to the start date. If no other input is specified it uses the current time. The other <em>validatorProps</em> option is <em>afterLabel</em> which completes the sentence "The date should be the same or after <em>label</em>." If you do not specify an <em>afterLabel</em>, either "the current time" or "the start date" is used (the latter is used if <em>afterElement</em> is specified);</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"text"</span> <span class="kw3">name</span>=<span class="st0">"endDate"</span> <span class="kw2">class</span>=<span class="st0">"validate-after-date afterElement:'startDate'"</span>/&gt;
<span class="co1">//if you don't include afterElement the current time is used</span>

</pre>
      <h2 id="Validator:validate-before-date"><a href="#Validator:validate-before-date">Validator: validate-before-date</a></h2>
      <p class="description">Takes in the id of a end field id and compares it to make sure the given value is before or equal to the end date. If no other input is specified it uses the current time. The other <em>validatorProps</em> option is <em>beforeLabel</em> which completes the sentence "The date should be the same or before <em>label</em>." If you do not specify an <em>beforeLabel</em>, either "the current time" or "the end date" is used (the latter is used if <em>beforeElement</em> is specified);</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input type=<span class="st0">"text"</span> <span class="kw3">name</span>=<span class="st0">"startDate"</span> <span class="kw2">class</span>=<span class="st0">"validate-before-date beforeElement:'endDate'"</span>/&gt;
<span class="co1">//if you don't include beforeElement the current time is used</span>

</pre>
      <h2 id="Validators:validate-custom-required"><a href="#Validators:validate-custom-required">Validator: validate-custom-required</a></h2>
      <p class="description">Required field with an option to define what an empty value is. For example, if you have a list months in a drop down list and first option is "select month" has a value of 'null', you can define a custom-required with emptyValue='null', so it's treated as an empty value.</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;select <span class="kw2">class</span>=<span class="st0">"validate-custom-required emptyValue:'null'"</span>&gt;
    &lt;option value=<span class="st0">"null"</span>&gt;Select One&lt;/option&gt;

    ...<span class="me1">etc</span>.
&lt;/select&gt;
</pre>
      <h2 id="Validators:validate-same-month"><a href="#Validators:validate-same-month">Validator: validate-same-month</a></h2>
      <p class="description">Takes another input's id and makes sure both ranges are within the same month. Pass in the <em>sameMonthAs</em> value in the <em>validatorProps</em> as the id of the form to compare to.</p>
      <h3>Example</h3>
      <pre class="javascript">&lt;input <span class="kw2">class</span>=<span class="st0">"validate-same-month sameMonthAs:'startDate'"</span>/&gt;
</pre>
      <h2 id="Validators:validate-match"><a href="#Validators:validate-match">Validator: validate-match</a></h2>
      <p class="description">Takes in an id of a field and matches them together. Can also take <em>matchName</em> that is used in the error message (i.e.: password confirmations). <em>matchName</em> defaults to the name of the other field, which isn't always very helpful, so you should specify it.</p>
      <pre class="javascript">&lt;input type=<span class="st0">"input"</span> <span class="kw2">class</span>=<span class="st0">"validate-match matchInput:'password' matchName:'password'"</span>/&gt;
<span class="co1">//error msg: This field needs to match the password field.</span>
</pre>
      <h2 id="Validators:validate-cc-num"><a href="#Validators:validate-cc-num">Validator: validate-cc-num</a></h2>
      <p class="description">Validates that an input is a valid credit card number (Visa, MasterCard, Amex, Discover). Note that it replaces all non-numeric characters to the value (but not to the input's displayed value) before it applies validation, so the user could put in dashes, letters, punctuation, whatever, but if the numbers in the value without those things makes a valid CC number, it will pass.</p>
      <pre class="javascript">&lt;input type=<span class="st0">"input"</span> <span class="kw2">class</span>=<span class="st0">"validate-cc-num"</span>/&gt;
</pre>
      <h1 id="Localization"><a href="#Localization">Form.Validator.Extras Language Localization</a></h1>
      <p class="description"><em>Form.Validator.Extras.js</em> includes the following key/values for localization.</p>
      <ul>
        <li>noSpace - (<em>string</em>) 'There can be no spaces in this input.'</li>
        <li>reqChkByNode - (<em>string</em>) 'No items are selected.'</li>
        <li>requiredChk - (<em>string</em>) 'This field is required.'</li>
        <li>reqChkByName - (<em>string</em>) 'Please select a {label}.'</li>
        <li>match - (<em>string</em>) 'This field needs to match the {matchName} field' where <em>matchName</em> is the name of another field</li>
        <li>startDate - (<em>string</em>)  'the start date'</li>
        <li>endDate - (<em>string</em>)  'the end date'</li>
        <li>currentDate - (<em>string</em>)  'the current date'</li>
        <li>afterDate - (<em>string</em>)  'The date should be the same or after {label}.' where <em>label</em> is the name of another date field</li>
        <li>beforeDate - (<em>string</em>)  'The date should be the same or before {label}.' where <em>label</em> is the name of another date field</li>
        <li>startMonth - (<em>string</em>)  'Please select a start month'</li>
        <li>sameMonth - (<em>string</em>)  'These two dates must be in the same month - you must change one or the other.'</li>
        <li>creditcard - (<em>string</em>) 'The credit card number entered is invalid. Please check the number and try again. {length} digits entered.' where <em>length</em> is the number of integers entered.</li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
